<template>
  <div class="play-station" @dblclick.stop>
    <div class="bg-image">
      <img
        v-for="(item, index) in playData.singerImage"
        :key="item"
        :src="item"
        :class="{ checked: currentImageIndex === index }"
        alt="bg"
      />
    </div>
    <div class="header">
      <system-child-btn close-type="hidden" :perv-icon-list="pervIconList" />
    </div>
    <div class="sing-name fs20 fw600">{{ playData.name }}</div>
    <div class="singer pt15 pb15">{{ playData.singer }}</div>
    <div class="lyrics-list" ref="lyricsListDom">
      <dl>
        <dd v-for="(item, index) in lyrics" :key="item.time" :class="{ current: currentIndex === index }">
          {{ item.text }}
        </dd>
      </dl>
    </div>
  </div>
</template>

<script setup lang="ts">
import SystemChildBtn from '@/base/systemWindow/systemChildBtn.vue'
import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { timeToNumber } from '@/utils/utils'
import { useRunningTasksStore } from '@/stores/taskBar/runningTasks'
import type { PropType } from 'vue'
import type { IPlayer } from '@/components/systemWindow/kuGou/kuGou.vue'

const props = defineProps({
  playData: {
    type: Object as PropType<IPlayer>,
    required: true
  }
})

const appId = inject<string>('appId') || ''
const taskId = inject<string>('taskId') || ''

const runningTasksStore = useRunningTasksStore()

// 切换背景图定时器
let changeTimer: ReturnType<typeof setTimeout>
// 歌词DOM
const lyricsListDom = ref<HTMLElement>()
// 当前歌词索引
const currentIndex = ref<number>(0)
// 当前背景图索引
const currentImageIndex = ref<number>(0)
// 歌词格式化
const lyrics = computed(() => {
  return props.playData?.lyrics.split('\n').map((item) => {
    const ly = item.split(']')
    return {
      time: timeToNumber(ly[0].replace('[', '')),
      text: ly[1]
    }
  })
})
// 系统按钮增加
const pervIconList = computed(() => {
  const find = runningTasksStore.findTask(appId, taskId)
  return [
    {
      icon: find?.isFull ? 'wos-fullscreen-shrink' : 'wos-fullscreen-expand',
      event: () => {
        runningTasksStore.setTaskPatch(appId, taskId, {
          isFull: !find?.isFull
        })
      }
    }
  ]
})

// 切换背景图
const changeImage = () => {
  changeTimer && clearTimeout(changeTimer)
  changeTimer = setTimeout(() => {
    currentImageIndex.value++
    if (currentImageIndex.value > props.playData.singerImage.length - 1) {
      currentImageIndex.value = 0
    }
    changeImage()
  }, 5000)
}

// 当播放时 动态锁定歌词位置
watch(
  () => props.playData?.currentDuration,
  async (val: number) => {
    await nextTick()
    if (!lyricsListDom.value) return
    let index = lyrics.value.findIndex((item) => item.time > val) - 1
    index = val >= lyrics.value[lyrics.value.length - 1].time ? lyrics.value.length - 1 : index
    currentIndex.value = index
    const child = Array.from(lyricsListDom.value.children[0].children) as HTMLElement[]
    const { offsetTop, offsetHeight } = lyricsListDom.value
    const y = child[index].offsetTop - offsetTop - offsetHeight / 4 + child[index].offsetHeight * 2
    lyricsListDom.value.style.setProperty('--lyrics-translate', `${-y}px`)
  },
  { immediate: true }
)

onBeforeUnmount(() => {
  // 销毁前停止背景图切换
  changeTimer && clearTimeout(changeTimer)
})

onMounted(() => {
  changeImage()
})
</script>

<style scoped lang="scss">
.play-station {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  transition: all 1s;
  text-align: center;
  background: var(--theme-bg);

  &.to-top-enter-active,
  &.to-top-leave-active {
    transition: all 0.3s ease !important;
  }

  &.to-top-enter-from,
  &.to-top-leave-to {
    opacity: 0.5;
    transform: translateY(100%);
  }

  .bg-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    > img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      filter: blur(10px);
      transition: all 0.3s;

      &.checked {
        z-index: 1;
        filter: blur(0);
        opacity: 1;
      }
    }
  }

  .header {
    height: 54px;
    position: relative;
    z-index: 10;

    ::v-deep(.system-child-btn) {
      transition: color 0.3s;
      color: var(--font-checked-color);
      padding-right: 20px;

      > span {
        width: 24px;
        color: #fff;

        &:hover {
          color: var(--hover-color);
          background-color: transparent;

          &::after {
            display: none;
          }
        }
      }
    }
  }

  .sing-name {
    height: 26px;
    position: relative;
    z-index: 10;
  }

  .singer {
    height: 46px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
  }

  .lyrics-list {
    position: relative;
    z-index: 10;
    margin-top: 70px;
    height: calc(100% - 54px - 26px - 46px - 70px - 140px);
    overflow-y: hidden;

    dl {
      transition: transform 0.3s;
      transform: translateY(var(--lyrics-translate));

      dd {
        height: 44px;
        line-height: 44px;
        font-size: 18px;

        &.current {
          font-size: 24px;
          color: rgb(250, 219, 129);
        }
      }
    }
  }
}
</style>
